import { Routes, Route, Link } from 'react-router-dom';
import 'antd/dist/reset.css';
import React, { useState } from 'react';
import {
  DesktopOutlined,
  PieChartOutlined,
  TeamOutlined,
} from '@ant-design/icons';
import { Layout, Menu } from 'antd';
import Home from './pages/Home';

const { Content, Sider } = Layout;

function getItem(label, key, icon, children) {
  return {
    key,
    icon,
    children,
    label,
  };
}
const items = [
  getItem(<Link to={'/'}>主应用</Link>, 'main-app', <PieChartOutlined />),
  getItem(<Link to={'/sub-vue'}>vue应用</Link>, 'sub-vue', <DesktopOutlined />),
  getItem(
    <Link to={'/sub-react'}>react应用</Link>,
    'sub-react',
    <TeamOutlined />,
  ),
  getItem(<Link to={'/sub-umi'}>umi应用</Link>, 'sub-umi', <TeamOutlined />),
];

function App() {
  const [collapsed, setCollapsed] = useState(false);
  const currentPath = window.location.pathname;
  const [selectedPath, setSelectedPath] = useState('main-app');
  const onClick = (e) => {
    setSelectedPath(e.key);
  };

  return (
    <Layout style={{ minHeight: '100vh' }}>
      <Sider
        collapsible
        collapsed={collapsed}
        onCollapse={(value) => setCollapsed(value)}
      >
        <Menu
          theme="dark"
          onClick={onClick}
          defaultSelectedKeys={['main-app']}
          mode="inline"
          items={items}
          selectedKeys={[selectedPath || 'main-app']}
        ></Menu>
      </Sider>
      <Layout>
        <Content style={{ margin: '0 16px' }}>
          <Routes>
            <Route path="/" element={<Home />}></Route>
          </Routes>
          <div id="sub-app"></div>
        </Content>
      </Layout>
    </Layout>
  );
}

export default App;
